<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* p{
				首行缩进,em:在汉字段落中,一个汉字的宽度
				text-indent: 2em;
				字间距
				letter-spacing: 2px;
				单词间距(针对英文,中文无效)
				word-spacing: 2px;
				文字透明
				color: rgba(0,0,0,.7);
				文字阴影效果  水平距离 垂直距离 模糊距离 阴影颜色
				text-shadow: 2px 2px 3px rgba(0,0,0,.5);
				行高
				line-height: 50px;
			} */
			
			h1{
				/* 取消加粗 */
				font-weight: normal;
			}
			span{
				background-color: aqua;
				/* padding: 100px 100px; */
			}
			.bg-img{
				width: 1000px;
				height: 1000px;
				background-color: antiquewhite;
				/* 平铺方式 no-repeat:不平铺 repeat-x横向 */
				background-repeat: no-repeat;
				background-image: url(https://i.328888.xyz/2022/12/05/VBGrA.png);
				/* 改变背景图片的方位 */
				background-position: right bottom; 
				/* background-position: 10px 30px; */
				/* background-position: 10px center; */
				/* 背景 默认滚动:scroll fixed:固定 */
				background-attachment: fixed;
				/* 背景简写的方式 颜色 地址 平铺 滚动 位置 */
				/* background: #000 url() no-repeat fixed right bottom; */
				/* 背景半透明 */
				background: rgba(0,0,0,.5);
				/* 背景图片大小设置 */
				/* background-size: 100px; */
				/* background-size: 50%; */
				/* 图片保持等比例缩放 保证能够铺满背景区域 */
				/* background-size: cover; */
				/* 调整缩放比例,保证图片完整的显示在背景区域 */
				background-size: contain;
				/* 多背景图片以,隔开,若是要设置背景颜色,须在最后的图片后面加 */
				background: url(),
				url() #000;
			}
			/* 凹凸效果 */
			.text-at{
				width: 700px;
				height: 300px;
				font-size: 80px;
				color: antiquewhite;
				background-color: antiquewhite;
				/* 文字居中 */
				text-align: center;
			}
			.text-at p:first-child{
				text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
			}
			.text-at p:last-child{
				text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
			}
			
			a{
				/* 去除下划线 */
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<h1>一</h1>
		<p>一二三四五</p>
		<span>
			123
		</span>
		<div class="bg-img"></div>
		<div class="text-at">
			<p>我是凸的</p>
			<p>我是凹的</p>
		</div>
	</body>
</html>